import React, { useEffect, useState } from "react"
import ReactMarkdown from 'react-markdown'
// 划线、表、任务列表和直接url等的语法扩展
import remarkGfm from 'remark-gfm'
// 解析标签，支持html语法
import rehypeRaw from 'rehype-raw'
import rehypeHighlight from "rehype-highlight"
import "highlight.js/styles/atom-one-dark.min.css"
// import "highlight.js/styles/atom-one-light.min.css"
import { Terminal } from "lucide-react"
import CopyButton from "../CopyButton"
import ScrollToTop from "../ScrollToTop"

const Markdown: React.FC<{ content: string }> = (props) => {
    const { content } = props

    const [ node, setNode ] = useState<HTMLElement>()
    useEffect(() => {
        setNode(document.querySelector('.markdown-body') as HTMLElement)
    }, [])

    return <>
        {/* 路径变化，容器默认回到顶部 */}
        <ScrollToTop node={node} />
        <ReactMarkdown
            rehypePlugins={[rehypeHighlight, rehypeRaw]}
            remarkPlugins={[remarkGfm]}
            components={{
                // 亮色
                // pre: ({ children }) => <pre className="not-prose">{children}</pre>,
                // 暗色
                pre: ({ children }) => <pre className="prose p-0 text-sm">{children}</pre>,
                code: ({ node, className, children, ...props }) => {
                    const match = /language-(\w+)/.exec(className || "")
                    if (match?.length) {
                        const id = Math.random().toString(36).substr(2, 9)
                        return (
                            <div className="not-prose rounded-md border">
                                {/* 代码块头部区域 */}
                                {/* 亮色 */}
                                {/* <div className="flex h-8 rounded items-center justify-between bg-gray-200 pl-3 pr-2 dark:bg-zinc-900"> */}
                                {/* 暗色 */}
                                <div className="flex h-8 rounded items-center justify-between bg-gray-900 pl-3 pr-2 dark:bg-zinc-900">
                                    <div className="flex items-center gap-2">
                                        <Terminal size={18} />
                                        <p className="text-sm text-zinc-300 dark:text-zinc-400">
                                            {match[1]}
                                        </p>
                                    </div>
                                    <CopyButton id={id} />
                                </div>
                                <div className="overflow-x-auto">
                                    <div id={id} className="p-4">
                                        {children}
                                    </div>
                                </div>
                            </div>
                        )
                    } else {
                        return (
                            <code
                                {...props}
                                className="not-prose rounded py-1 bg-[#f9f2f4] px-1 dark:bg-zinc-900 text-[#c7254e]"
                            >
                                {children}
                            </code>
                        )
                    }
                }
            }}
            className="prose max-w-xl prose-zinc dark:prose-invert prose-sm overflow-auto box-border pr-[15px] h-full markdown-body"
        >{content}</ReactMarkdown>
    </>
}

export default Markdown